<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @keydown.up="up"
      @keydown.down="down"
      @input="getValue"
    />

    <!--        搜索历史-->
    <div class="search_history">
      <div class="serach_history_top">
        搜索历史
        <van-icon name="delete" />
      </div>
    </div>
    <!--        搜索提示-->
    <div class="search-tip" v-if="tipShow">
      <van-cell-group>
        <van-cell
          :title="item.title"
          v-for="(item,index) in list"
          :key="index"
          value="内容"
          :class="{bg:index===current}"
          class="cell_item"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
    export default {
        name: "SearchPage",
        data() {
            return {
                value: '', // input输入框里的值
                list: [],  //展示搜索历史的数组
                tipShow: false, //搜索提示是否显示
                current: -1,
            }
        },
        methods: {
            getValue() {
                axios.get('/list.json').then(res => {
                    this.list = [];  //清空数组
                    res.data.result.forEach(ele => {
                        if (this.value.length === 0) {
                            this.tipShow = false;  //展示提示隐藏
                            return false;
                        } else {
                            //展示提示显示
                            this.tipShow = true;
                            if (ele.title.includes(this.value)) {
                                this.list.push(ele);
                            }
                        }

                    })

                }).catch(err => {
                    console.log(err)
                })
            },
            up() {
                if (this.current === -1 || this.current === 0) {
                    this.current = this.list.length - 1;

                } else {
                    this.current--
                      this.value = this.list[this.current].title;}
            },
            down() {
                if (this.current < this.list.length - 1) {
                    this.current++;
                } else {
                    this.current = 0;
                }
                    this.value = this.list[this.current].title;
            },
        }
    }
</script>

<style scoped>
.cell_item {
  color: #666666;
}
.bg {
  background-color: #f5f5f5 !important;
}
/deep/ .van-cell__title {
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serach_history_top {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
}

.search-tip {
  width: 100%;
  height: 50vh;
  background-color: #fff;
  position: absolute;
  overflow: hidden;
  top: 45px;
  left: 0;
  z-index: 55;
}
</style>